<template>
    {{#if ctrl.psSysPFPlugin}}
    {{> @macro/plugins/widget/widget-use.hbs appPlugin=ctrl.psSysPFPlugin}}
    {{else}}
    <div :class="classNames" :id="controlID" style="{{#if ctrl.width}}width: {{ctrl.width}}px;{{/if}}{{#if ctrl.height}}height: {{ctrl.height}}px;{{/if}}">
        <AppTree
            v-bind="$attrs"
            v-if="store.initTree"
            :load="load"
            :items="store.data"
            :multiple="!singleSelect"
            :expandedKeys="store.expandedKeys"
            :selectedKeys="store.selectedKeys"
            :loadedKeys="store.loadedKeys"
            :counterData="store.counterData"
            :showDefaultIcon="{{#if ctrl.outputIconDefault}}true{{else}}false{{/if}}"
            @expand-change="handleExpandChange"
            @value-change="handleValueChange"
            @selection-change="handleSelectionChange"
            @context-menu-item-click="handleContextMenuItemClick">
            {{#each ctrl.psDETreeNodes as | node |}}
                    {{#if node.psSysPFPlugin}}
                <template #{{node.nodeType}}="{ rowData }">
                    {{> @macro/plugins/ctrl-item/ctrl-item-use.hbs ctrl=ctrl appPlugin=node.psSysPFPlugin}}
                </template>
                    {{/if}}
            {{/each}}
        </AppTree>
    </div>
    {{/if}}
</template>
<script setup lang="ts">
// 基于template/src/widgets/\{{appEntities}}/\{{ctrls@TREEVIEW}}-tree/\{{spinalCase ctrl.codeName}}-tree.vue.hbs生成
{{> @macro/plugins/widget/widget-import.hbs ctrl=ctrl}}
{{importPlugin 'tree' ctrl}}
import { model } from './{{spinalCase ctrl.codeName}}-tree-model';
import { AppTree } from '@components/widgets/tree';
import { {{pascalCase ctrl.name}}ControlVO } from './{{spinalCase ctrl.codeName}}-tree-vo';
import { TreeActionType, TreeController, IContext, ITreeAbility, ITreeControllerParams, ITreeStore, IParam, ITreeController, ILoadingHelper, ControlVOBase, createUUID, IViewCtx } from '@/core';
import { useNavParamsBind, useEventBind, getCtrlClassNames } from '@/hooks/use-ctrl';
import TreeService from "@/core/modules/ctrl-service/tree-service";
{{> @macro/widgets/ctrl/ctrl-props.hbs
    props="openView?: Function;
    newView?: Function;
    singleSelect?: boolean;
    selections?: IParam[];
    selectFirstDefault?: boolean;
    "
    propsDefault="singleSelect: true,
    selections: () => [],
    selectFirstDefault: false,
    "
}}

{{> @macro/common/emit.hbs name="ctrl" actionType="TreeActionType" ability="ITreeAbility"}}

const classNames = computed(() => {
  return getCtrlClassNames(model, props);
});

const controlID = createUUID();

const ctrlService = new TreeService<ControlVOBase[]>({{pascalCase ctrl.name}}ControlVO, model.entityCodeName, { model });

const params: ITreeControllerParams<TreeActionType, ITreeAbility> = {
    name: props.name,
    model,
    evt,
    controlID,
    pLoadingHelper: props.pLoadingHelper,
    singleSelect: props.singleSelect,
    selections: props.selections,
    selectFirstDefault: props.selectFirstDefault,
    openView: props.openView,
    newView: props.newView,
    closeView: props.closeView,
    ctrlService,
    pViewCtx: props.pViewCtx,
    handler: (data: ITreeStore) => { return reactive(data); }
};

{{> @macro/common/controller.hbs name="ctrl" IController="ITreeController" store="ITreeStore" ability="ITreeAbility" controller="TreeController"}}

const handleSelectionChange = (selections: IParam[]) => {
    controller.handleSelectionChange(selections);
}

const handleExpandChange = (expandedKeys: string[]) => {
    controller.handleExpandChange(expandedKeys);
}

const handleValueChange = (item: IParam) => {
    controller.handleValueChange(item);
}

const handleContextMenuItemClick = (node: IParam, args: IParam) => {
    controller.handleContextMenuItemClick(node, args);
}
const { load } = controller.getAbility();
</script>